<template>
  <div>
    <codemirror
      ref="myCm"
      v-model="codeContent"
      :options="codeOptions"
      class="code"
      @beforeChange="beforeChange"
      @focus="focus"
      @click="clickIt"
      @cursorActivity="cursorActivity"
      @changes="changes"></codemirror>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css' // css，必要
// 编辑的主题文件
import 'codemirror/theme/base16-light.css'
import 'codemirror/theme/eclipse.css'
import 'codemirror/theme/darcula.css'
import 'codemirror/addon/fold/foldgutter.css'
// 编辑器代码高亮css文件
import 'codemirror/addon/hint/show-hint.css'
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/xml-fold.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/comment-fold.js')
require('codemirror/mode/htmlmixed/htmlmixed.js')
require('codemirror/addon/hint/html-hint.js')
export default {
  name: 'TableList',
  components: {
    codemirror
  },
  props: {
    mode: {
      type: String,
      default: 'text/html'
    }
  },
  data () {
    const _this = this
    return {
    mdl: {},
    theme: 'darcula',
    codeContent: '',
	  codeOptions: {
    lineNumbers: true,
    smartIndent: true,
    mode: this.mode,
    foldGutter: true,
    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
    extraKeys: { 'Tab': 'autocomplete',
      'Ctrl-S': function () {
         _this.$emit('ctrls')
      }
    },
    theme: 'darcula'// 编辑器主题
	  }
    }
  },
  created () {

  },
  methods: {
     setCodeContent (content) {
       this.codeContent = content
     },
     getCodeContent (content) {
       return this.codeContent
     },
     beforeChange (e, data) {
        if (data.origin === '+input' && data.text && data.text.length > 0 && data.text[0] === '@') {
          this.$emit('tip')
          data.cancel()
        }
     },
     focus () {
       this.$emit('focus')
     },
     clickIt () {
       alert(22)
     },
     cursorActivity (e) {
        this.$emit('cursorActivity', e)
     },
     replaceSelection (text) {
        if (text) { this.$refs.myCm.codemirror.replaceSelection(text) }
     },
     setFocus () {
       const codemirror = this.$refs.myCm.codemirror
       codemirror.focus()
     },
     changes (e, arrays) {
       // if (arrays.length === 0) {
       //    const obj = arrays[0]
       //    const data = {
       //      e: obj,
       //      textArr: [],
       //      textStr: ''
       //    }
       //    if (obj.origin === '+input') {
       //       data.textArr = obj.text
       //       data.textStr = obj.text[0]
       //       this.$emit('compose', data)
       //    } else if (obj.origin === '+delete') {
       //       data.textArr = obj.removed
       //       data.textStr = this.formatText(obj.removed)
       //       this.$emit('delete')
       //    } else if (obj.origin === 'paste') {
       //       data.textArr = obj.text
       //       data.textStr = this.formatText(obj.text)
       //       this.$emit('paste')
       //    }
       // }
       //  console.log(e)
       //   console.log(arrays)
     },
     formatText (texts) {
       let text = ''
       if (texts && Array.isArray(texts)) {
          texts.forEach(function (val, index) {
            text += val
          })
       }
       return text
     },
     clear () {
        this.$refs.myCm.codemirror.setValue('')
     }
  }
}
</script>

<style type="text/css">
  .CodeMirror {
    height: 600px !important;
    width: 100% !important;
    /* background-color: rgb(230, 225, 218) */
  }
/*  .CodeMirror-linenumbers{
    width: 10px !important;
  }
  .CodeMirror-foldgutter{
    width: 20px !important;
  } */

  .codeTemp {
    border: 1px dashed #e8e8e8;
    border-radius: 6px;

  }

  .v-contextmenu .v-contextmenu-submenu>.v-contextmenu.right {
    max-height: 300px;
    overflow-y: auto;
  }

  ::-webkit-scrollbar-track-piece {
  background-color:#2B2B2B;
  }
  ::-webkit-scrollbar {
  width:9px;
  height:9px;
  }
  ::-webkit-scrollbar-thumb {
  background-color:#2B2B2B;
  background-clip:padding-box;
  min-height:28px;
  }
  ::-webkit-scrollbar-thumb:hover {
  background-color:#2B2B2B;
  }
</style>
